<!-- header 组件 -->
<template>
    <div class="header">
        <lay-row>
            <lay-col md="3" class="left">
                <div class="div center">
                    <img src="../assets/logo.png" alt="">
                </div>
            </lay-col>
            <lay-col md="21" class="right">
                <div class="div justify">
                    <div class="div center">
                        <div class="tele" style="margin:0 10px;" @click="isCollapse = !isCollapse">
                            <lay-icon type="layui-icon-shrink-right" v-if="isCollapse" size="20px"
                                color="#393D49"></lay-icon>
                            <lay-icon type="layui-icon-spread-left" v-else size="20px" color="#393D49"></lay-icon>
                        </div>
                        <lay-breadcrumb>
                            <lay-breadcrumb-item title="工作空间"></lay-breadcrumb-item>
                            <lay-breadcrumb-item title="控制台"></lay-breadcrumb-item>
                            <lay-breadcrumb-item title="访问量"></lay-breadcrumb-item>
                        </lay-breadcrumb>
                    </div>

                    <div class="right_user c center">
                        <div class="div">
                            <lay-avatar :src="user.userImage"></lay-avatar>
                        </div>
                        <div class="div">
                            <div class="aaa" v-for="item in roleList" :key="item.id">
                                <lay-tag :type="item.roleType" v-if="user.role == item.id">{{ item.
                                    permissionName }}</lay-tag>
                            </div>
                        </div>
                        <div class="div">
                            <lay-icon type="layui-icon-screen-full" size="24px"></lay-icon>
                        </div>
                        <div class="div">
                            <lay-icon type="layui-icon-refresh" size="22px"></lay-icon>
                        </div>
                        <div class="div">
                            <lay-dropdown trigger="hover" placement="bottom" updateAtScroll>
                                <lay-icon type="layui-icon-more" size="24px"></lay-icon>
                                <template #content>
                                    <lay-dropdown-menu>
                                        <lay-dropdown-menu-item>个人信息</lay-dropdown-menu-item>
                                        <lay-dropdown-menu-item @click="outLogin">退出登录</lay-dropdown-menu-item>
                                    </lay-dropdown-menu>
                                </template>
                            </lay-dropdown>

                        </div>
                    </div>
                </div>
            </lay-col>
        </lay-row>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const isCollapse = ref(true)
import {
    getRole
} from '../api/path/role.js'
import { useRouter } from 'vue-router';

const user = ref(JSON.parse(localStorage.getItem('userInfo'))[0])
const roleList = ref([])
const router = useRouter();
const src = ref()
const outLogin = () => {
    console.log('退出登录');
    router.push('/login')
}
onMounted(async () => {
    let res = await getRole()
    roleList.value = res.data
    localStorage.setItem('roleList', JSON.stringify(res.data))
    console.log(user.value);
})
</script>
<style scoped lang="less">
.header {
    border-bottom: 1px solid #e6e6e6;
}

.left {
    .div {
        height: 60px;

        img {
            width: 60%;
        }
    }
}

.right {
    .justify {
        height: 60px;
    }
}

.right_user {
    display: flex;
    padding-right: 50px;

    .div {
        padding: 0 10px;
    }
}
</style>